﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="11.aspx.cs" Inherits="BaseWeb.拖拽研究._11" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>增强用户体验</title>
    <%--
    前面是实现拖拽的功能，JQueryUI还有一些参数可以增强用户体验。
    
    比如，
    cursor参数可以指定鼠标指针的形状，
    cursorAt指定鼠标指针在source的相对位置，
    revert可以指定当drop失败时source“飘”回原来的位置。
    
    一个组合的例子如下：
    --%>
    <style>
        .draggable
        {
            background-color: green;
            width: 20px;
            height: 20px;
            padding: 0px;
            float: left;
            margin: 0 0px 0px 0;
        }
        .droppable
        {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>

    <script src="../../js/jquery-1.7.min.js" type="text/javascript"></script>

    <script src="../../js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

    <script>
        $(function()
        {
            $("#draggable2").draggable({
                revert: "invalid",
                cursor: "move",
                cursorAt: { top: 0, left: 0 }
            });
            $("#droppable").droppable({
                activeClass: "ui-state-hover",
                hoverClass: "ui-state-active",
                drop: function(event, ui)
                {
                    $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
                }
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="draggable2" class="draggable">
        <p>
            m</p>
        <%--     <p>
            I revert when I'm not dropped</p>--%>
    </div>
    <div id="droppable" class="droppable">
        <p>
            Drop me here</p>
    </div>
    </form>
</body>
</html>
